<template>
  <el-dialog title="提示" :visible.sync="visible" width="60%">
    <el-form :inline="true" size="mini">
      <el-row>
        <el-form-item label="编号">{{ model.chengjiId }} </el-form-item>
        <el-form-item label="学生">{{ model.chengjiStudent }} </el-form-item>
        <el-form-item label="学期">{{ model.chengjiTerm }} </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <avue-crud  :option="tableOption" :data="table1Data">
          </avue-crud>
        </el-col>
        <el-col :span="12">
          <avue-crud  :option="tableOption" :data="table2Data">
          </avue-crud>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="$cellEdit" @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="closeDialog()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
const fieldMap = {
  chengjiChineses: "语文",
  chengjiMath: "数学",
  chengjiForeign: "外语",
  chengjiPolitical: "思想政治",
  chengjiHistory: "历史",
  chengjiGeography: "地理",
  chengjiPhysics: "物理",
  chengjiChemistry: "化学",
  chengjiBiology: "生物",
  chengjiInformation: "信息技术",
  chengjiTechnology: "通用技术",
  chengjiArts: "艺术",
  chengjiArts1: "美术",
  chengjiMusic: "音乐",
  chengjiSports: "体育与健康",
  chengjiPractice1: "综合实践活动",
  chengjiPractice2: "选修II",
  chengjiPractice3: "研究性学习",
};
export default {
  props: ["handleSave", "handleUpdate"],
  data() {
    return {
      visible: false,
      model: {
        chengjiId: null,
        chengjiTerm: null,
        chengjiStudent: null,
        $cellEdit: false,
      },
      tableOption: {
        addBtn: false,
        menu: false,
        columnBtn: false,
        refreshBtn: false,
        page: false,
        size: "mini",
        align: "center",
        rowKey: "field",
        column: [
          { label: "科目", prop: "title", width: 120 },
          {
            label: "必修",
            children: [
              {
                label: "成绩",
                type: "input",
                cell: true,
                prop: "scores0",
                clearable: false,
                placeholder: "",
              },
              {
                label: "学分",
                type: "input",
                cell: false,
                prop: "credits0",
                clearable: false,
              },
            ],
          },
          {
            label: "选修",
            children: [
              {
                label: "成绩",
                type: "input",
                cell: true,
                prop: "scores1",
                clearable: false,
              },
              {
                label: "学分",
                type: "input",
                cell: false,
                prop: "credits1",
                clearable: false,
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    $cellEdit(){
      return this.model.$cellEdit;
    },
    table1Data() {
      return this.model2Row([
        "chengjiChineses",
        "chengjiMath",
        "chengjiForeign",
        "chengjiPolitical",
        "chengjiHistory",
        "chengjiGeography",
        "chengjiPhysics",
        "chengjiChemistry",
        "chengjiBiology",
        "chengjiInformation",
      ]);
    },
    table2Data() {
      return this.model2Row([
        "chengjiTechnology",
        "chengjiArts",
        "chengjiArts1",
        "chengjiMusic",
        "chengjiSports",
        "chengjiPractice1",
        "chengjiPractice2",
        "chengjiPractice3",
      ]);
    },
  },
  created() {
    Object.keys(fieldMap).forEach((key) =>
      this.$set(this.model, key, {
        scores0: null,
        credits0: null,
        scores1: null,
        credits1: null,
        need_credits: null,
        credits_sum: null,
      })
    );
  },
  methods: {
    openDialog(model) {
      this.model = model;
      this.visible = true;
    },
    closeDialog() {
      this.row2model();
      const done=()=>{this.visible=false}
      const doNothing=()=>{}
      if(this.$cellEdit === true  && -1 === this.model.$index)
        this.$emit("handleSave",this.model,done, doNothing);
      else if(this.$cellEdit === true && -1 != this.model.$index)
        this.$emit("handleUpdate",this.model,this.model.$index,done, doNothing); 
      else
        done();      
    },
    model2Row(ary) {
      const  $cellEdit  = this.$cellEdit;
      return Object.keys(fieldMap)
        .filter((key) => -1 != ary.indexOf(key))
        .map((key) => {
          return {
            ...this.model[key],
            field: key,
            title: fieldMap[key],
            $cellEdit,
          };
        });
    },
    row2model() {
      const { field, title, $cellEdit, $index } = {};
      this.table1Data.forEach(
        (row) =>
          (this.model[row.field] = { ...row, field, title, $cellEdit, $index })
      );
      this.table2Data.forEach(
        (row) =>
          (this.model[row.field] = { ...row, field, title, $cellEdit, $index })
      );
    },
  },
};
</script>
